<!--
 * @Author: 陈昌俊
 * @Date: 2021-10-25 11:14:22
 * @LastEditTime: 2021-11-11 14:20:23
 * @LastEditors: 杨超
 * @Description: 
-->
<template>
    <BasePage>
        <Query slot="form" @filter="handleFilter" />
        <BaseButton slot="button" v-permission="{ btnCode: 'dlyh_c11_d36_2' }" @click="handleAdd"> 事件录入 </BaseButton>
        <List slot="table" v-loading="loading" :list="list" @delete="handleDelete" @edit="handleEdit" @click-number="handleClickNumber" />
        <Pagination
            slot="pagination"
            class="text-right"
            :current-page="pageOption.pageNo"
            :page-size="pageOption.pageSize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </BasePage>
</template>
<script>
import BasePage from '@/layouts/BasePage'
import Query from './components/Query'
import List from './components/List'
import { TrafficIncidentModel } from '@/models'
const trafficIncidentModel = new TrafficIncidentModel()
import useTable from '@/hooks/useTable'
import useSuccess from '@/hooks/useSuccess'
import { ResetKeepAlive } from '@/mixins/keepAliveHandler'

export default {
    name: 'Events',
    components: {
        BasePage,
        Query,
        List
    },
    mixins: [ResetKeepAlive()],
    setup(props, context) {
        const { pageOption, list, total, loading, getList, handleCurrentChange, handleSizeChange, handleFilter } = useTable({ model: trafficIncidentModel })
        return {
            pageOption,
            list,
            total,
            loading,
            getList,
            handleCurrentChange,
            handleSizeChange,
            handleFilter
        }
    },
    methods: {
        async handleDelete(id) {
            await this.$store.dispatch('trafficIncident/delete', { id })
            useSuccess({ onlyTip: true })
            this.getList()
        },
        handleEdit(row) {
            this.$router.push({
                name: 'EditEvent',
                query: {
                    id: row.id,
                    number: row.number
                }
            })
        },
        handleAdd() {
            this.$router.push({
                name: 'AddEvent'
            })
        },
        handleClickNumber(row) {
            this.$router.push({
                name: 'EventDetail',
                query: {
                    id: row.id,
                    number: row.number,
                    time: row.trafficTime
                }
            })
        }
    }
}
</script>
